import BaseLayoutVue from '@/layouts/BaseLayout.vue';
import HomeLayouts from '@/pages/home/home-layouts/HomeLayouts.vue';

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { projectRoutes } from './routes-list/project.routes';
import { webpackRoutes } from './routes-list/webpack.routes';
import { interviewRoutes } from './routes-list/interview.routes';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: BaseLayoutVue,
    redirect: '/home',
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            name: 'home',
            meta: {
              title: '首页',
            },
            component: () => import('@/pages/home/home-layouts/HomeLayouts.vue'),
          },
        ],
      },
      {
        path: 'project',
        children: [
          {
            path: '',
            name: 'project',
            meta: {
              title: '项目搭建',
            },
            redirect: '/project/vite',
            component: () => import('@/pages/project/ProjectHomePage.vue'),
            children: [...projectRoutes],
          },
        ],
      },
      {
        path: 'interview',
        children: [
          {
            name: 'interview',
            path: '',
            component: () => import('@/pages/interview/InterviewHomePage.vue'),
            redirect: '/interview/computer',
            children: [...interviewRoutes],
          },
        ],
      },
      {
        path: 'style',
        component: () => import('@/pages/style/style-layouts/StyleLayouts.vue'),
        name: 'style',
        children: [
          {
            path: '',
            meta: {
              parentName: 'style',
              title: 'css特效',
            },
            component: () => import('@/pages/style/pages/index.vue'),
          },
        ],
      },
      {
        path: 'harmony',
        children: [
          {
            path: '',
            meta: {
              parentName: 'harmony',
            },
            component: () => import('@/pages/map/map-layouts/MapLayouts.vue'),
          },
        ],
      },
      {
        path: 'webpack',
        meta: {
          title: 'webpack',
        },
        redirect: '/webpack/concept',
        component: () => import('@/pages/webpack/webpack-layouts/WebpackLayouts.vue'),
        children: webpackRoutes,
      },
      {
        path: 'about',
        name: 'about',
        meta: {
          title: '关于我',
        },
        component: () => import('@/pages/about/about-layouts/AboutLayouts.vue'),
      },
    ],
  },
];

const rootRoutes = createRouter({
  history: createWebHistory('/'),
  routes,
});

rootRoutes.beforeEach(async (to, from, next) => {
  console.log(to, from);
  // commonStore.setCollapsed(false);
  console.log(1111);

  next();
});

export default rootRoutes;
